<template>
    <div class="index-container">
        <v-breadcrumb :breadcrumbData="[{name:'系统管理'},{name:'管理员列表'}]"></v-breadcrumb>


        <div class="g-box" style="min-height:600px">
            <div class="flex-center flex-between">
                <el-button v-preventDbClick icon="el-icon-plus" type="primary" class="mb-15 width-100"
                           @click="add()">新建
                </el-button>
                <div></div>
            </div>
            <el-table :data="list" :fit="true" stripe border :header-cell-style="{background:'#eee'}">
                <el-table-column prop="id" label="ID" width="120"></el-table-column>
                <el-table-column prop="username" label="用户名"></el-table-column>
                <el-table-column prop="username" label="角色" width="150">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick v-for="(item,index) in manageRoles" :key="index" type="primary"
                                   v-if="scope.row.manage_role_id==item.id" size="mini" :plain="true">{{ item.name }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="用户状态" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick size="mini" :plain="true"
                                   :type="scope.row.status==1?'success':'danger'">
                            {{ scope.row.status == 1 ? '正常' : '禁用' }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="密码强度" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" :plain="true" type="success" v-if="scope.row.strength>=7">高等强度
                        </el-button>
                        <el-button size="mini" :plain="true" type="primary"
                                   v-if="scope.row.strength>=4&&scope.row.strength<7">中等强度
                        </el-button>
                        <el-button size="mini" :plain="true" type="danger"
                                   v-if="scope.row.strength>=1&&scope.row.strength<4">
                            低、限单次登录
                        </el-button>
                        <el-button size="mini" :plain="true" type="info" v-if="scope.row.strength==0">低、限单次登录
                        </el-button>
                        <el-button size="mini" :plain="true" type="warning" v-if="scope.row.strength<0">低、禁止登录
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" border width="130" label="操作">
                    <template slot-scope="scope">
                        <el-button v-preventDbClick size="mini" title="设为正常" v-if="scope.row.status==2"
                                   @click="setAvailable(scope.row)"
                                   type="success" icon="el-icon-check" circle></el-button>
                        <el-button v-preventDbClick size="mini" title="禁止登录" v-if="scope.row.status==1"
                                   @click="setUnavailable(scope.row)" type="danger" icon="el-icon-lock"
                                   circle></el-button>
                        <el-button v-preventDbClick size="mini" type="info" title="重置密码"
                                   @click="resetPassword(scope.row.id)"
                                   icon="el-icon-set-up" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog title="添加" width="450px" :visible.sync="addDialogIsShow">
            <div class="add-box">
                <div class="flex-center flex-between">
                    <span class="span">用户名</span>
                    <el-input placeholder="请输入用户名或手机号" class="width-300" v-model="addobj.username"></el-input>
                </div>
                <div class="flex-center flex-between mt-15">
                    <span class="span">系统角色</span>
                    <el-select v-model="addobj.manage_role_id" class="width-300" placeholder="请选择">
                        <el-option v-for="(item,index) in manageRoles" v-if="item.id!=1" :key="index" :label="item.name"
                                   :value="item.id"></el-option>
                    </el-select>
                </div>
                <div class="flex-center flex-between mt-15">
                    <span class="span">密码</span>
                    <el-input class="width-300" disabled value="默认密码：123456"></el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button v-preventDbClick @click="addDialogIsShow=false">取 消</el-button>
            <el-button v-preventDbClick type="primary" @click="submit">确 定</el-button>
          </span>
        </el-dialog>

    </div>
</template>

<script type="text/ecmascript-6">
import request from '../../common/js/request.js';
import {tool} from "../../common/js/tool.js";
import config from '../../common/js/config.js'

export default {
    data() {
        return {
            manageRoles: [],
            total: 0,
            list: [],
            editId: 0,
            addDialogIsShow: false,
            addobj: {
                username: '',
                manage_role_id: 3,
            }
        };
    },

    computed: {},

    created() {
        request({
            url: '/manage/manageRole/all',
        }).then((res) => {
            this.manageRoles = res.data;
            this.getData();
        })
    },

    methods: {
        submit() {
            request({
                url: '/manage/manage/add',
                data: this.addobj
            }).then((res) => {
                tool.message(res.msg, 'success', () => {
                    this.addDialogIsShow = false;
                    this.getData();
                })
            })
        },

        add() {
            this.addobj.username = '';
            this.addobj.manage_role_id = 3;
            this.addDialogIsShow = true;
        },

        resetPassword(id) {
            this.$confirm('确定要重置密码为“123456”吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                request({
                    url: '/manage/manage/resetPassword',
                    data: {id: id}
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.getData();
                    })
                })
            });
        },

        setUnavailable(row) {
            this.$confirm('确定要禁止登录吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                request({
                    url: '/manage/manage/setUnavailable',
                    data: {id: row.id}
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.getData();
                    })
                })
            });
        },

        setAvailable(row) {
            this.$confirm('确定要启用吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                request({
                    url: '/manage/manage/setAvailable',
                    data: {id: row.id}
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.getData();
                    })
                })
            });
        },

        getData(page) {
            request({
                url: '/manage/manage/list',
            }).then((res) => {
                this.list = res.data;
            })
        },

    },

};
</script>

<style lang="less" rel="stylesheet/less" scoped>
@import url("../../common/css/variable.less");

.index-container {
    .image {
        width: 50px;
        height: 50px;
        border: none;
        margin-top: 5px;
    }
}
</style>
